<template>
  <div>
    <el-dialog
      :title="dialogInfo.isAdd ? '添加限时秒杀管理' : '编辑限时秒杀管理'"
      :visible.sync="dialogInfo.isShow"
      :before-close="cancel"
      center
    >
      <el-form :model="seckInfo" ref="seckInfo">
        <el-form-item
          label="活动名称"
          :label-width="formLabelWidth"
          prop="title"
        >
          <el-input v-model="seckInfo.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动期限" :label-width="formLabelWidth">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="timestamp"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item
          label="一级分类"
          :label-width="formLabelWidth"
          prop="first_cateid"
        >
          <el-select
            @change="changeCate(false)"
            v-model="seckInfo.first_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in cateList"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="二级分类"
          :label-width="formLabelWidth"
          prop="second_cateid"
        >
          <el-select
            @change="changetwo(false)"
            v-model="seckInfo.second_cateid"
            placeholder="请选择"
          >
            <el-option
              v-for="item in secondArr"
              :key="item.id"
              :label="item.catename"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品" :label-width="formLabelWidth" prop="goodsid">
          <el-select v-model="seckInfo.goodsid" placeholder="请选择">
            <el-option
              v-for="item in shop"
              :key="item.id"
              :label="item.goodsname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

   <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch
            v-model="seckInfo.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
import { goodsList, seckAdd, seckInfo, seckEdit } from "../../request/api";
export default {
  data() {
    return {
      seckInfo: {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      },
      formLabelWidth: "120px", //label宽度
      value1: [],
      secondArr: [],
      shop: [],
    };
  },
  props: ["dialogInfo"],
  computed: {
    ...mapGetters({
      cateList: "cate/getCate",
      specasList: "specas/getSpecsList",
      goodList: "shopmanger/getShopMangerList",
    }),
  },
  mounted() {
    if (this.cateList == 0) {
      this.getCate();
    }
    if (this.specasList == 0) {
      this.getSpecs();
    }
  },
  methods: {
    ...mapActions({
      getCate: "cate/getCateActions",
      getSeck: "seck/getSeckActions",
      getSpecs: "specas/getSpecsListActions",
    }),
    // changtime() {
    //   console.log(this.value1);
    //   this.seckInfo.begintime = this.value1[0];
    //   this.seckInfo.endtime = this.value1[1];
    // },
    cancel() {
      this.$emit("cancel", false);
      this.reset();
    },
    changeCate(n) {
      //封装一个切换一级分类切换二级分类的事件
      let index = this.cateList.findIndex(
        (item) => item.id == this.seckInfo.first_cateid
      );
      this.secondArr = this.cateList[index].children;
      //清空二级分类的双向数据绑定值
      // 如果不是回显就是切换就清空，否则就不清空
      if (!n) {
        this.seckInfo.second_cateid = "";
      }
    },
    changetwo(n) {
      goodsList().then((res) => {
        this.shop = res.list.filter(
          (item) => item.second_cateid == this.seckInfo.second_cateid
        );
      });
      if (!n) {
        this.shop = [];
      }
    },
    confirm() {
      this.$refs.seckInfo.validate((val) => {
        if (val) {
          this.seckInfo.begintime = this.value1[0];
          this.seckInfo.endtime = this.value1[1];
          //商品的规格属性需要字符串格式，而目前我们的数据格式是[],对入参进行数据格式转化
          //   this.goodsInfo.specsattr = this.goodsInfo.specsattr.join(",");
          //   this.goodsInfo.description = this.editor.txt.html();
          if (this.dialogInfo.isAdd) {
            console.log(this.seckInfo);
            seckAdd(this.seckInfo).then((res) => {
              if (res.code == 200) {
                this.cancel();
                this.getSeck();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          } else {
            seckEdit(this.seckInfo).then((res) => {
              // console.log("1111");
              if (res.code == 200) {
                this.cancel();
                this.getSeck();
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg);
              }
            });
          }
        } else {
          this.$message.error("验证失败");
          return false;
        }
      });
    },
    lookup(id) {
      seckInfo({ id }).then((res) => {
        if (res.code == 200) {
          this.seckInfo = res.list;
          console.log(this.seckInfo, "123123");
          //对图片进行数据回显
          this.value1 = [this.seckInfo.begintime, this.seckInfo.endtime];

          this.$message.success(res.msg);
          this.changeCate(true);
          this.changetwo(true);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    reset() {
      this.seckInfo = {
        title: "",
        begintime: "",
        endtime: "",
        first_cateid: "",
        second_cateid: "",
        goodsid: "",
        status: 1,
      };
      this.value1 = [];
      this.$refs.seckInfo.resetFields();
    },
  },
};
</script>

<style scoped>
</style>
